<template>
  <div class="delivery-staff-management">
    <el-main>
      <div class="header">
        <h2>配送员管理</h2>
        <div class="actions">
          <!-- 移除了添加配送员按钮 -->
          <el-button type="success" :style="{ backgroundColor: '#0f9b0f', borderColor: '#0f9b0f' }" @click="refreshStaffList">刷新数据</el-button>
        </div>
      </div>
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>
      
      <!-- 配送员列表 -->
      <el-table 
        v-else 
        :data="deliveryStaff" 
        style="width: 100%"
        border
        stripe
        highlight-current-row
        class="delivery-staff-table"
      >
        <el-table-column prop="id" label="ID"/>
        <el-table-column prop="name" label="姓名"/>
        <el-table-column prop="phone" label="联系电话"/>
        <el-table-column label="工作区域">
          <template #default>
            <el-tag 
              type="success"
              effect="light"
              :style="{ 
                backgroundColor: '#e8f6e8', 
                borderColor: '#95d595',
                color: '#0f9b0f'
              }"
              class="area-tag"
            >
              北京市
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="工作状态">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row)">{{ getStatusText(row) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="task_count" label="任务数量"/>
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-button 
              type="success" 
              link 
              size="small"
              :style="{ color: '#ffffff', backgroundColor: '#0f9b0f', padding: '2px 6px', borderRadius: '4px' }"
              @click="handleViewStats(row)"
            >查看统计</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 统计数据对话框 -->
      <el-dialog
        v-model="statsDialogVisible"
        title="配送员工作统计"
        width="80%"
        class="stats-dialog"
      >
        <template v-if="currentStaff">
          <h3>{{ currentStaff.name }} 的工作统计</h3>
          
          <!-- 统计卡片 -->
          <el-row :gutter="20" class="stat-cards">
            <el-col :span="6">
              <el-card class="stat-card">
                <template #header>
                  <div class="card-header">
                    <span>总任务数</span>
                  </div>
                </template>
                <div class="stat-value">{{ staffStats.totalTasks }}</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="stat-card">
                <template #header>
                  <div class="card-header">
                    <span>已完成任务</span>
                  </div>
                </template>
                <div class="stat-value">{{ staffStats.completedTasks }}</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="stat-card">
                <template #header>
                  <div class="card-header">
                    <span>已分配任务</span>
                  </div>
                </template>
                <div class="stat-value">{{ staffStats.assignedTasks }}</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="stat-card">
                <template #header>
                  <div class="card-header">
                    <span>配送中任务</span>
                  </div>
                </template>
                <div class="stat-value">{{ staffStats.deliveringTasks }}</div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="stat-card">
                <template #header>
                  <div class="card-header">
                    <span>完成率</span>
                  </div>
                </template>
                <div class="stat-value">
                  {{ staffStats.completedTasks > 0 ? ((staffStats.completedTasks / staffStats.totalTasks) * 100).toFixed(1) : '0.0' }}%
                </div>
              </el-card>
            </el-col>
          </el-row>
          
          <!-- 任务状态分布图表 -->
          <el-row :gutter="20" class="chart-row">
            <el-col :span="12">
              <el-card class="chart-card">
                <div id="staff-task-status-chart" style="height: 400px;"></div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="chart-card">
                <div id="staff-area-delivery-chart" style="height: 400px;"></div>
              </el-card>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
      
      <!-- 移除了添加配送员对话框 -->
    </el-main>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, onUnmounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import * as echarts from 'echarts'

// 数据定义
const deliveryStaff = ref([])
const loading = ref(true)
const currentPage = ref(1)
const pageSize = ref(10)
const totalItems = ref(0)

// 区域管理
const areaDialogVisible = ref(false)
const currentStaff = ref(null)
const availableAreas = ref([])
const selectedArea = ref(null)
const areaLoading = ref(false)
const addingArea = ref(false)
const areaForm = reactive({})

// 统计数据
const statsDialogVisible = ref(false)
const staffStats = reactive({
  totalTasks: 0,
  completedTasks: 0,
  assignedTasks: 0,
  deliveringTasks: 0,
  taskStatusDistribution: [],
  areaDeliveryDistribution: []
})

// 图表实例
let taskStatusChart = null
let areaDeliveryChart = null

// 移除了添加配送员相关的变量和函数

// 获取配送员列表
const fetchDeliveryStaff = async () => {
  loading.value = true
  try {
    const token = getToken()
    if (!token) {
      ElMessage.warning('请先登录')
      loading.value = false
      return
    }
    
    console.log('开始获取配送员列表...')
    
    // 1. 获取配送员基本信息
    const staffResponse = await axios.get('/api/delivery-staff/', {  // 添加末尾斜杠
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json'
      }
    })
    
    console.log('配送员API响应数据:', staffResponse.data)
    
    let staffList = []
    if (Array.isArray(staffResponse.data)) {
      staffList = staffResponse.data
    } else if (staffResponse.data && staffResponse.data.results) {
      staffList = staffResponse.data.results
    } else if (staffResponse.data && staffResponse.data.data) {
      staffList = staffResponse.data.data
    }

    // 2. 获取所有配送员的任务信息
    const staffTasksMap = new Map()
    
    for (const staff of staffList) {
      const staffId = staff.user?.id  // 直接使用 user.id
      if (!staffId) {
        console.warn('配送员缺少 user.id:', staff)
        continue
      }

      try {
        // 获取任务信息
        const taskResponse = await axios.get('/api/delivery-tasks/', {  // 添加末尾斜杠
          params: { 
            deliveryman: staffId,
            page_size: 1000  // 确保获取所有任务
          },
          headers: {
            'Authorization': `Bearer ${token}`,
            'Accept': 'application/json'
          }
        })

        console.log(`配送员 ${staffId} 的任务响应:`, taskResponse.data)

        let tasksData = []
        if (taskResponse.data.code === 200 && taskResponse.data.data) {
          tasksData = taskResponse.data.data.items || []
        } else if (Array.isArray(taskResponse.data)) {
          tasksData = taskResponse.data
        } else if (taskResponse.data.results) {
          tasksData = taskResponse.data.results
        }

        console.log(`配送员 ${staffId} 的任务数据:`, tasksData)
        staffTasksMap.set(staffId, tasksData)
      } catch (error) {
        console.error(`获取配送员 ${staffId} 的信息失败:`, error)
        staffTasksMap.set(staffId, [])
      }
    }
    
    // 3. 处理每个配送员的信息
    deliveryStaff.value = staffList.map(staff => {
      const staffId = staff.user?.id
      if (!staffId) return null
      
      const tasksData = staffTasksMap.get(staffId) || []
      
      // 计算任务状态
      const assignedTasks = tasksData.filter(task => task.status === 'assigned').length
      const deliveringTasks = tasksData.filter(task => task.status === 'delivering').length

      const completedTasks = tasksData.filter(task => 
        task.status === 'completed'
      ).length

      const totalTasks = tasksData.length

      console.log(`配送员 ${staffId} 的最终数据:`, {
        totalTasks,
          assignedTasks,
          deliveringTasks,
        completedTasks
      })

      return {
        id: staffId,
        name: staff.user?.username || staff.name,
        phone: staff.user?.phone || staff.phone,
        task_count: totalTasks,
        assigned_tasks: assignedTasks,
        delivering_tasks: deliveringTasks,
        completed_tasks: completedTasks,
        vehicle_number: staff.vehicle_number
      }
    }).filter(Boolean)  // 移除空值
    
    console.log('最终的配送员列表:', deliveryStaff.value)
    
    totalItems.value = staffList.length
    
    if (deliveryStaff.value.length === 0) {
      ElMessage.info('暂无配送员数据')
    }
  } catch (error) {
    console.error('获取配送员列表失败:', error)
    if (error.response) {
      console.error('错误响应:', error.response.data)
    }
    deliveryStaff.value = []
    totalItems.value = 0
    ElMessage.error('获取配送员列表失败: ' + (error.response?.data?.detail || error.message))
  } finally {
    loading.value = false
  }
}

// 刷新配送员列表
const refreshStaffList = async () => {
  try {
    await fetchDeliveryStaff()
    ElMessage.success('数据已更新')
  } catch (error) {
    console.error('刷新数据失败:', error)
    ElMessage.error('刷新数据失败: ' + error.message)
  }
}

// 移除了handleAddStaff函数

// 打开区域管理对话框
const handleManageAreas = async (staff) => {
  currentStaff.value = staff
  selectedArea.value = staff.areas[0]?.id || null
  areaDialogVisible.value = true
  await fetchDeliveryAreas()
}

// 获取配送区域列表
const fetchDeliveryAreas = async () => {
  areaLoading.value = true
  try {
    const token = getToken()
    if (!token) {
      ElMessage.warning('请先登录')
      areaLoading.value = false
      return
    }
    
    const response = await axios.get('/api/delivery-areas/', {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json'
      }
    })
    
    console.log('获取配送区域响应:', response.data)
    
    // 处理响应数据，支持分页和非分页格式
    const areas = Array.isArray(response.data) ? response.data : 
                 (response.data.results || response.data.data || [])
    
    if (areas.length > 0) {
      // 处理区域数据
      availableAreas.value = areas.map(area => ({
        ...area,
        displayName: area.name.split(/[,，]/).filter(Boolean)[0] || area.name
      }))
      
      console.log('可用区域:', availableAreas.value)
    } else {
      console.error('获取配送区域列表失败，没有可用区域')
      ElMessage.warning('暂无可用的配送区域')
    }
  } catch (error) {
    console.error('获取配送区域列表出错:', error)
    if (error.response) {
      console.error('错误响应状态:', error.response.status)
      console.error('错误响应数据:', error.response.data)
    }
    ElMessage.error('获取配送区域列表失败: ' + (error.response?.data?.detail || error.message))
  } finally {
    areaLoading.value = false
  }
}

// 获取配送员统计数据
const fetchStaffStats = async (staffId) => {
  try {
    const token = getToken()
    if (!token) {
      ElMessage.warning('请先登录')
      return
    }

    // 获取该配送员的所有配送任务
    const tasksResponse = await axios.get('/api/delivery-tasks/', {
      params: {
        deliveryman: staffId,
        page_size: 1000  // 获取足够多的数据以便统计
      },
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json'
      }
    })

    console.log('配送任务API响应:', tasksResponse.data)

    let tasksData = []
    if (tasksResponse.data.code === 200 && tasksResponse.data.data) {
      tasksData = tasksResponse.data.data.items || []
    } else if (Array.isArray(tasksResponse.data)) {
      tasksData = tasksResponse.data
    } else if (tasksResponse.data.results) {
      tasksData = tasksResponse.data.results
    }

    console.log('处理后的任务数据:', tasksData)

    // 计算总任务数
    staffStats.totalTasks = tasksData.length
    console.log('总任务数:', staffStats.totalTasks)

    // 计算已完成任务数
    staffStats.completedTasks = tasksData.filter(task => task.status === 'completed').length
    console.log('已完成任务数:', staffStats.completedTasks)

    // 计算已分配的任务数
    staffStats.assignedTasks = tasksData.filter(task => task.status === 'assigned').length
    console.log('已分配任务数:', staffStats.assignedTasks)

    // 计算配送中的任务数
    staffStats.deliveringTasks = tasksData.filter(task => task.status === 'delivering').length
    console.log('配送中任务数:', staffStats.deliveringTasks)

    // 计算任务状态分布
    const statusMap = {
      'completed': '已完成',
      'assigned': '已分配',
      'delivering': '配送中',
      'cancelled': '已取消'
    }
    
    const statusCount = {}
    tasksData.forEach(task => {
      const statusText = statusMap[task.status] || task.status
      if (!statusCount[statusText]) {
        statusCount[statusText] = 0
      }
      statusCount[statusText]++
    })

    staffStats.taskStatusDistribution = Object.entries(statusCount).map(([name, value]) => ({
      name,
      value
    }))
    
    console.log('任务状态分布:', staffStats.taskStatusDistribution)

    // 计算区域配送量分布
    const areaDeliveryCount = {}
    tasksData.forEach(task => {
      if (task.address) {
        // 匹配北京市各区名称
        const areaMatch = task.address.match(/(东城区|西城区|朝阳区|丰台区|石景山区|海淀区|门头沟区|房山区|通州区|顺义区|昌平区|大兴区|怀柔区|平谷区|密云区|延庆区)/)
        const areaName = areaMatch ? areaMatch[1] : '其他区域'
        
        // 初始化区域计数
      if (!areaDeliveryCount[areaName]) {
          areaDeliveryCount[areaName] = 0
      }
        areaDeliveryCount[areaName]++
      }
    })

    // 转换为图表所需的数据格式并按配送量排序
    staffStats.areaDeliveryDistribution = Object.entries(areaDeliveryCount)
      .map(([name, value]) => ({ name, value }))
      .sort((a, b) => b.value - a.value)

    console.log('区域配送量分布:', staffStats.areaDeliveryDistribution)

    // 初始化图表
    nextTick(() => {
      initTaskStatusChart()
      initAreaDeliveryChart()
    })
  } catch (error) {
    console.error('获取配送员统计数据失败:', error)
    if (error.response) {
      console.error('错误响应:', error.response.data)
    }
    ElMessage.error('获取统计数据失败: ' + (error.response?.data?.detail || error.message))
  }
}

// 初始化任务状态分布图表
const initTaskStatusChart = () => {
  const chartDom = document.getElementById('staff-task-status-chart')
  if (!chartDom) return

  if (!taskStatusChart) {
    taskStatusChart = echarts.init(chartDom)
  }

  const option = {
    title: {
      text: '任务状态分布',
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)',
      backgroundColor: '#fff',
      borderColor: '#eee',
      textStyle: { color: '#333' }
    },
    legend: {
      orient: 'horizontal',
      bottom: 10,
      left: 'center',
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 20,
      textStyle: { 
        fontSize: 14,
        color: '#333'
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '45%'],  // 稍微向上移动饼图
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
          label: {
            show: true,
          position: 'outside',
          color: '#333',
          fontSize: 12,
          fontWeight: 'bold',
          formatter: '{b}\n{d}%'
        },
        labelLine: {
          show: true,
          length: 18,
          length2: 12,
          lineStyle: { color: '#333', width: 1.5 }
        },
        data: staffStats.taskStatusDistribution.map((item, index) => ({
          ...item,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [
                { offset: 0, color: index === 0 ? '#00b09b' : index === 1 ? '#02aab0' : index === 2 ? '#0f9b0f' : '#11998e' },
                { offset: 1, color: index === 0 ? '#96c93d' : index === 1 ? '#00cdac' : index === 2 ? '#45b649' : '#38ef7d' }
              ]
            }
          }
        }))
      }
    ]
  }

  taskStatusChart.setOption(option)
}

// 初始化区域配送量图表
const initAreaDeliveryChart = () => {
  const chartDom = document.getElementById('staff-area-delivery-chart')
  if (!chartDom) return

  if (!areaDeliveryChart) {
    areaDeliveryChart = echarts.init(chartDom)
  }

  const option = {
    title: {
      text: '区域配送量分布',
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{b}: {c} 单',
      backgroundColor: '#fff',
      borderColor: '#eee',
      textStyle: { color: '#333' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: staffStats.areaDeliveryDistribution.map(item => item.name),
      axisLabel: {
        interval: 0,
        rotate: 30,
        color: '#333'
      },
      axisLine: {
        lineStyle: {
          color: '#333'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '配送量',
      minInterval: 1,
      axisLabel: {
        formatter: '{value} 单',
        color: '#333'
      },
      axisLine: {
        lineStyle: {
          color: '#333'
        }
      }
    },
    series: [
      {
        name: '配送量',
        type: 'bar',
        data: staffStats.areaDeliveryDistribution.map(item => item.value),
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#00b09b'  // 深青绿色
              },
              {
                offset: 1,
                color: '#0f9b0f'  // 深绿色
              }
            ]
          },
          borderRadius: [5, 5, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
      {
                  offset: 0,
                  color: '#02aab0'  // hover时的深青色
                },
                {
                  offset: 1,
                  color: '#11998e'  // hover时的深绿色
                }
              ]
            }
          }
        },
        label: {
          show: true,
          position: 'top',
          color: '#333',
          fontWeight: 'bold',
          formatter: '{c} 单'
        }
      }
    ]
  }

  areaDeliveryChart.setOption(option)
}


// 查看统计数据
const handleViewStats = async (staff) => {
  currentStaff.value = staff
  statsDialogVisible.value = true
  await fetchStaffStats(staff.id)
}

// 监听窗口大小变化，重绘图表
const handleResize = () => {
  if (taskStatusChart) {
    taskStatusChart.resize()
  }
  if (areaDeliveryChart) {
    areaDeliveryChart.resize()
  }
}

// 组件挂载时添加事件监听
onMounted(() => {
  window.addEventListener('resize', handleResize)
  fetchDeliveryStaff()
})

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (taskStatusChart) {
    taskStatusChart.dispose()
  }
  if (areaDeliveryChart) {
    areaDeliveryChart.dispose()
  }
})

// 处理添加区域
const handleAddArea = async () => {
  if (!selectedArea.value) {
    ElMessage.warning('请选择配送区域')
    return
  }

  addingArea.value = true
  try {
    const token = getToken()
    if (!token) {
      ElMessage.warning('请先登录')
      addingArea.value = false
      return
    }

    // 先获取当前配送员的区域分配
    const existingResponse = await axios.get('/api/deliveryman-areas/', {
      params: {
        deliveryman: currentStaff.value.id
      },
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json'
      }
    })

    // 如果有现有分配，先删除它们
    if (Array.isArray(existingResponse.data) && existingResponse.data.length > 0) {
      for (const assignment of existingResponse.data) {
        await axios.delete(`/api/deliveryman-areas/${assignment.id}/`, {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        })
      }
    }

    console.log('正在分配区域:', {
      deliveryman: currentStaff.value.id,
      area: selectedArea.value
    })

    // 创建新的区域分配
    const response = await axios.post('/api/deliveryman-areas/', {
      deliveryman: currentStaff.value.id,
      area: selectedArea.value
    }, {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })

    if (response.data) {
      // 更新本地数据
      const selectedAreaData = availableAreas.value.find(area => area.id === selectedArea.value)
      if (selectedAreaData) {
        // 找到当前配送员在列表中的索引
        const staffIndex = deliveryStaff.value.findIndex(staff => staff.id === currentStaff.value.id)
        if (staffIndex !== -1) {
          // 只更新当前配送员的区域信息
          deliveryStaff.value[staffIndex].areas = [selectedAreaData]
        }
        // 更新当前选中的配送员的区域信息
        currentStaff.value.areas = [selectedAreaData]
      }
      
      ElMessage.success('配送区域分配成功')
      areaDialogVisible.value = false
    }
  } catch (error) {
    console.error('分配区域失败:', error)
    if (error.response) {
      console.error('错误响应状态:', error.response.status)
      console.error('错误响应数据:', error.response.data)
      // 显示具体的错误信息
      let errorMsg = '请求失败'
      if (error.response.data.deliveryman) {
        errorMsg = `配送员: ${error.response.data.deliveryman[0]}`
      } else if (error.response.data.area) {
        errorMsg = `区域: ${error.response.data.area[0]}`
      } else if (error.response.data.non_field_errors) {
        errorMsg = error.response.data.non_field_errors[0]
      } else if (error.response.data.detail) {
        errorMsg = error.response.data.detail
      }
      ElMessage.error('分配区域失败: ' + errorMsg)
    } else {
      ElMessage.error('分配区域失败: ' + error.message)
    }
  } finally {
    addingArea.value = false
  }
}

// 获取配送员状态类型
const getStatusType = (staff) => {
  if (!staff.task_count) {
    return 'info' // 灰色，无任务
  }
  
  if (staff.delivering_tasks > 0) {
    return 'success' // 绿色，有配送中的任务
  }
  
  if (staff.assigned_tasks > 0) {
    return 'warning' // 黄色，有已分配的任务
  }
  
  if (staff.completed_tasks > 0) {
    return 'warning' // 黄色，有已完成的任务
  }
  
  return 'info' // 默认灰色
}

// 获取配送员状态文本
const getStatusText = (staff) => {
  if (!staff.task_count) {
    return '空闲'
  }
  
  if (staff.delivering_tasks > 0) {
    return '配送中'
  }
  
  if (staff.assigned_tasks > 0) {
    return '已分配'
  }
  
  if (staff.completed_tasks > 0) {
    return '已完成'
  }
  
  return '空闲'
}

// 获取默认区域（北京市）
const getDefaultArea = async (token) => {
  try {
    const response = await axios.get('/api/delivery-areas/', {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json'
      }
    })
    
    let areas = []
    if (Array.isArray(response.data)) {
      areas = response.data
    } else if (response.data && response.data.results) {
      areas = response.data.results
    } else if (response.data && response.data.data) {
      areas = response.data.data
    }
    
    // 查找名称包含"北京市"的区域
    const beijingArea = areas.find(area => area.name.includes('北京市'))
    if (!beijingArea) {
      throw new Error('未找到北京市区域')
    }
    
    return beijingArea.id
  } catch (error) {
    console.error('获取默认区域失败:', error)
    throw error
  }
}

// 移除了submitAddStaff函数
</script>

<style scoped>
.delivery-staff-management {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.actions {
  display: flex;
  gap: 10px;
}

.delivery-staff-table {
  margin-top: 20px;
}

.area-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.area-description {
  color: #999;
  font-size: 12px;
  margin-left: 8px;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 160px;
  display: flex;
  flex-direction: column;
}

.stat-card .card-header {
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #333;
}

.stat-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  color: #0f9b0f;
}

.chart-card {
  margin-bottom: 20px;
  padding: 20px;
}

.chart-row {
  margin-bottom: 20px;
}

.loading-container {
  padding: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.stats-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__header) {
  margin-right: 0;
  padding: 20px;
  border-bottom: 1px solid #EBEEF5;
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: bold;
}

:deep(.el-dialog__headerbtn) {
  top: 20px;
  right: 20px;
}

.staff-count {
  font-size: 36px;
  font-weight: bold;
  color: var(--primary-color);
}
</style>